<!-- 组合式 -->
<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({

		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#fff',
		},
		borderRadius: {
			type: String,
			default: '',
		},
		detailPage: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: 'game',
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		},
	})

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	// const modelValue = defineModel();

	// 是否可以报名
	// const apply = computed(() => {
	// 	const {
	// 		bmStartDate,
	// 		bmEndDate,
	// 		bsDate,
	// 		scoreDate,
	// 	} = props.info;

	// 	// 当前时间
	// 	const time = util.getMYD('formattedDate')
	// 	return bmStartDate <= time && time <= bmEndDate;
	// });
	
	// 报名比赛
	const buttonValue = computed(() => {
	
		// if (apply.value) return '报名比赛';
	
		const {
			bsEndDate,
			status,
		} = props.info;
	
		if (status == 1) return '准备报名';
		else if (status == 2) return '开始报名';
		else if (status == 3) return '报名结束';
		else if (status == 4) return '正在比赛';
	
		else if (status == 5) return '比赛结束';
		else if (status == 6) return '比赛结束';
	
		// 当前时间
		// const time = util.getMYD('formattedDate')
	
		// 
		// return bsEndDate <= time ? '比赛结束' : '报名结束';
	})

	// 详情
	function changeTo() {

		// 去登录
		// const login = util.GoLogin();
		// if (!login) return;

		let url = `/${props.type}-details`;
		let param = {
			id: props.info.id || ''
		};

		if (!param.id || !url) return;
		util.to(url, param);
	}

	// 回调
	const emit = defineEmits(['change'])
</script>


<template>
	<div class="l-card-prize" :style="{backgroundColor}" @click="changeTo">

		<el-image class="image" :src="util.getHttpImageUrl(info.image)" fit="cover" v-if="info.image" />

		<div class="info">

			<div class="title-view">
				<p class="info-title thd">{{info.title || info.name}}</p>

				<p class="jiang" v-if="type == 'game'">比赛时间：{{info.bsDate || '--'}}</p>
				<p class="jiang" v-else>奖项：{{info.levelTypeName}}</p>

			</div>

			<div class="info-game-main" v-if="type == 'game'">
				<p>比赛地点：{{info.address || '--'}}</p>
				<p>赛事类别：{{info.typeName || '--'}}</p>
				<p>参赛对象：{{info.xyDeptId || '--'}}</p>
			</div>

			<p class="info-time" v-else>获奖人员：{{info.personInfo}} </p>

			<l-button value="查看作品" @change="changeTo" v-if="type == 'prize'" />
			
			<!-- 报名比赛 -->
			<l-button :type="info.status < 5 ? 'primary' : 'disabled' " borderRadius="4px" :value="buttonValue"
				@click.stop="info.status < 5 ? changeTo('/home/apply') : ''" v-else/>
				
		</div>
	</div>
</template>


<style lang="scss">
	.l-card-prize {
		width: 100%;
		cursor: pointer;
		padding: 20px;
		display: flex;
		overflow: hidden;

		.image {
			width: 210px;
			height: 140px;
			border-radius: 4px;
			margin-right: 20px;
		}

		.info {
			width: calc(100% - 230px);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 3px 0;

			.title-view {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-title {
					font-size: 20px;
					color: #333333;
				}

				.jiang {
					font-size: 16px;
					color: #5173F2;
				}
			}

			.info-game-main {
				font-size: 14px;
				color: #999999;
				line-height: 20px;
			}

			.info-time {
				font-size: 16px;
				color: #999999;
			}

			.l-button {
				width: 120px;
				font-size: 14px !important;
				line-height: 26px !important;
				// background: linear-gradient(90deg, #7B95F3 0%, #5173F2 100%);
				// border-radius: 4px 4px 4px 4px;
			}
		}
	}
</style>